<!-- eslint-disable no-undef -->
<script setup lang="ts">
// 导入类型、组件、接口、模块
import type { PostLoginType } from '@/api/login/types'
import type { FormRules, FormInstance } from 'element-plus'

import { ElMessage } from 'element-plus'
import { Back } from '@element-plus/icons-vue'

import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

// 变量
const router = useRouter()

// 表单数据
const formData = reactive<PostLoginType>({
	mobile: '',
	captcha: ''
})
// 表单验证
const checkMobile = (rule: any, value: string, callback: any) => {
	if (/^1\d{10}$/.test(value)) {
		callback()
	} else {
		callback(new Error('手机号格式有误'))
	}
}
const formRules = reactive<FormRules>({
	mobile: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ validator: checkMobile, trigger: 'blur' }
	],
	pwd: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 2, max: 15, message: '至少2~15个字符', trigger: 'blur' }
	],
	captcha: [
		{ required: true, message: '请输入验证码', trigger: 'blur' },
		{ min: 4, max: 4, message: '至少4个字符', trigger: 'blur' }
	]
})
// 表单提交
const formRef = ref<FormInstance>()
const handleSubmit = () => {
	if (!formRef.value) return
	// formRef.value!.validate((isSuccess) => {
	formRef.value.validate((isSuccess) => {
		if (isSuccess) {
			// 1 请求接口
			// 2 判断 失败-弹框提示，成功-提示、存储、跳转
			console.log('表单数据.：', formData)
			ElMessage.success('登录成功')
			router.push('/')
		}
	})
}
</script>

<template>
	<!-- 
    <h1>hello login</h1> 
    1-布局  el-form  el-form-item  el-input/select等等
    2-收集数据  el-form :model="formData"  v-model="formData.键"
    3-表单验证  el-form :rules="formRules" prop="开启验证规则"
    4-提交验证  el-form ref="标识"     ref.validate(isSuccess => {})

    以前v3
    const formRef = ref(null)
    el-form ref="formRef"
    @click handleSubmit  formRef.value.validate

    现在v3ts
    const formRef = ref<FormInstance>()
    el-form ref="formRef"
    @click handleSubmit  formRef.value.validate
  -->
	<div class="login">
		<el-form size="large" :model="formData" :rules="formRules" ref="formRef" class="animate__animated animate__zoomInDown">
			<el-form-item>
				<h1>锋团运营平台🐝</h1>
			</el-form-item>
			<el-form-item prop="mobile">
				<el-input placeholder="请输入手机号" v-model="formData.mobile"></el-input>
			</el-form-item>
			<el-form-item prop="captcha">
				<el-row>
					<el-col :span="18">
						<el-input placeholder="请输入验证码" v-model="formData.captcha"></el-input>
					</el-col>
					<el-col :span="6">
						<el-button>获取验证码</el-button>
					</el-col>
				</el-row>
			</el-form-item>
			<el-form-item>
				<el-button type="default" @click="$router.push('/login')" :icon="Back"></el-button>
				<el-button type="primary" @click="handleSubmit" class="loginBtn">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<style lang="scss" scoped>
.login {
	width: 100%;
	height: 100%;
	background-color: $qf-bg-color;
	display: flex;
	justify-content: center;
	align-items: center;

	.el-form {
		width: 300px;

		h1 {
			font-size: 42px;
			color: #fff;
		}

		.el-form-item:nth-child(3) {
			:deep(.el-input__wrapper) {
				border-radius: 0 !important;
			}
			.el-button {
				width: 96px;
				border: none;
				border-radius: 0;
			}
		}

		.loginBtn {
			width: 234px;
		}
	}
}
</style>
